﻿<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <title>叩丁狼CRM(演示版)</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <#include "../common/header.ftl"/>
    <link rel="stylesheet" href="/css/core.css"/>
    <script src="/js/plugins/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/bootstrap-treeview/bootstrap-treeview.css"/>
</head>
<body>
<#assign menu="region"/>
<#include "../common/top.ftl"/>
<div class="container " style="margin-top: 20px">

    <div class="row">
        <div class="col-sm-3">
        <#include "../common/menu.ftl"/>
        </div>
        <div class="col-sm-9">
            <div class="page-header">
                <h3>地区管理</h3>
            </div>
            <div class="row">
                <div class="form-group" style="margin-left: 20px">
                    <a class="btn btn-success inputBtn" id="addRegionBtn">添加地区</a>
                </div>
            </div>

            <div class="row">

                <div class="row">
                    <div class="col-sm-4">
                        <ul id="menu" class="list-group">
                            <li class="list-group-item">
                                <div id="treeview1"></div>
                            </li>
                        </ul>
                    </div>


                    <div class="col-sm-8">

                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>名称</th>
                                <th></th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="regionModel" tabindex="-1" role="dialog" aria-labelledby="regionLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="regionLabel">编辑添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/region/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id"/>
                    <input type="hidden" name="parent.id"/>
                    <input type="hidden" name="state"/>
                    <input type="reset" hidden id="reset"/>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">上级地区：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="parentName" placeholder="上级地区" readonly>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary saveOrUpdateBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<script>

    $.get("/region/query.do", {"type": "tree"}, function (data) {
        $('#treeview1').treeview({
            data: [{text: "全部地区", nodes: data}],
            showTags: true,
            lazyLoad: function (node) {
                $.get("/region/query.do", {"parentId": node.id, "type": "tree"}, function (data) {
                    $("#treeview1").treeview("addNode", [data, node]);
                });
            },
            onNodeSelected: function (event, node) {
                $.get("/region/query.do", {"parentId": node.id}, function (data) {
                    var str = "";
                    $.each(data, function (index, ele) {
                        str += "<tr><td>" + index + "</td><td>" + ele.name + "</td><td><button class='inputBtn' type='button' data-json='" + ele.json + "'>修改</button></td><td><button type='button' class='stateBtn' data-json='" + ele.json + "'>"+ele.stateName+"</button></td></tr>";
                    });
                    $("tbody").html(str);
                    $(".inputBtn").click(function () {
                        var json = $(this).data("json");
                        $("#reset").click();
                        $("#editForm input[name='parent.id']").val(node.id);
                        $("#editForm input[name='parentName']").val(node.text);
                        if (json) {
                            console.log(node);
                            $("#editForm input[name='id']").val(json.id);
                            $("#editForm input[name='name']").val(json.name);
                            $("#editForm input[name='state']").val(json.state);
                        }
                        $("#regionModel").modal("show");
                    });

                    $(".stateBtn").click(function () {
                        var state = 1;

                        if ($(this).data("json").state) {
                                state = 0;
                        }

                      $.post("/region/changeState.do",{"id":$(this).data("json").id,"state":state},function () {
                                doSucceed()});
                    });
                });
            }

        });
    });
    $(".saveOrUpdateBtn").click(function () {
        $.messager.confirm("温馨提示", "是否真的保存", function () {
            $("#editForm").ajaxSubmit(function (data) {
                doSucceed();
            });
        });
    });



    function doSucceed() {
        $.messager.alert("操作成功", "2秒后自动关闭");
        setTimeout(function () {
            location.reload();
        }, 1024);
    }

</script>

</body>
</html>
